$colors = {
  info: #428bca,
  danger: #d9534f,
  primary: #6f42c1,
  warning: #f0ad4e,
  success: #5cb85c,
  default: #777
}

.note
  position relative
  margin 0.5rem 0
  padding .5rem
  border-radius 3px
  display flex
  align-items center
  font-size 0.7rem
  line-height 1
  font-weight 400
  text-align left
  letter-spacing 0.6px

  &:not(.no-icon)
    padding-left .6rem

  > i.solitude
    margin-right 0.7rem
    font-size large

  a
    color inherit !important

    &:hover
      color var(--efu-white) !important

  for $color, $value in $colors
    &.{$color}:not(.disabled)
      border-left-color $value

      &.modern
        color $value

      &:not(.simple)
        background lighten($value, 75%)

      > i
        color $value

  &.simple
    border-width 1px 1px 1px 5px
    border-style solid
    border-color #eee
    border-image initial

  &.modern
    background-color #f5f5f5
    color #4c4948
    border 1px solid transparent !important

  &.flat
    border initial
    border-image initial
    border-left 5px solid #eee
    background-color #f9f9f9
    color #4c4948

  .article-container &
    h2, h3, h4, h5, h6
      margin-top 3px
      margin-bottom 0
      border-bottom initial
      padding-top 0

    p
      margin 0
      font-size inherit
      letter-spacing normal
